/*
Button
*/
.an-btn {
    --an-btn-padding: var(--an-padding, 10px);
    --an-btn-gap: 5px;
    --an-btn-height: var(--an-height, 32px);
    --an-btn-border-color: var(--an-border-color, #d7d7d7);
    --an-btn-border: 1px solid var(--an-btn-border-color);
    --an-btn-border-radius: var(--an-border-radius, 4px);
    --an-btn-font-size: var(--an-font-size, 14px);
    --an-btn-text-color: var(--an-text-color-primary);
    --an-btn-bg-color: transparent;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding-inline-start: var(--an-btn-padding);
    padding-inline-end: var(--an-btn-padding);
    height: var(--an-btn-height);
    line-height: var(--an-btn-height);
    border: var(--an-btn-border);
    border-radius: var(--an-btn-border-radius);
    font-size: var(--an-btn-font-size);
    color: var(--an-btn-text-color);
    background-color: var(--an-btn-bg-color);
    cursor: pointer;

    &[data-type="primary"] {
        --an-btn-text-color: #fff;
        --an-btn-bg-color: var(--an-color-primary);
        --an-btn-border-color: var(--an-color-primary);
    }

    &[data-type="success"] {
        --an-btn-text-color: #fff;
        --an-btn-bg-color: var(--an-color-success);
        --an-btn-border-color: var(--an-color-success);
    }

    &[data-type="warning"] {
        --an-btn-text-color: #fff;
        --an-btn-bg-color: var(--an-color-warning);
        --an-btn-border-color: var(--an-color-warning);
    }

    &[data-type="danger"] {
        --an-btn-text-color: #fff;
        --an-btn-bg-color: var(--an-color-danger);
        --an-btn-border-color: var(--an-color-danger);
    }

    &[data-round] {
        border-radius: var(--an-btn-height);
    }

    &[data-block] {
        width: 100%;
        justify-content: center;
    }

    &[data-disabled] {
        opacity: .7;
        cursor: not-allowed;
    }

    &[data-type]:not([data-disabled]):hover {
        filter: brightness(1.2)
    }

    &:not([data-type], [data-disabled]):hover {
        color: var(--an-color-primary);
        border-color: var(--an-color-primary);
    }
}